<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>智能人数计算系统</title>


    <style>
  

            h1{
              color:#ff8eb3;
           text-align:center;
        font-size: 70px;
        
            }
            h2{
              color:green;
              font-size: 50px;
        
        
            }
            p{
            color:#ff8eb3;
           text-align:center;
              font-size: 25px;
        
        
            }
            span{
        
                font-size: 35px;
                color: #fff;
            }
           
        
                .af {
                    width: 400px;
                    height: 200px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    display: inline-block;
                    margin: 20px;
                    text-align: center;
                    font-size: 50px;
                    color: #fff;
                    background: #ff8eb3;
                    margin: 0 100px;
                    margin-top: 150px;
                }
                /*.af:hover{
                    opacity: 0.8;
                }*/
                .title {
                    font-size: 60px;
                    color: #ff8eb3;
                    margin-bottom: 30px;
                }
        
                #inp {
                    width: 100%;
                    height: 100px;
                    font-size: 50px;
                    margin-top: 100px;
                    border-top: none;
                    border-left: none;
                    border-right: none;
                    border-bottom: 3px solid #ff8eb3;
                    color: #ff8eb3;
                }
          #touch {
            width: 60px;
            height: 60px;
            position: absolute;
            left: 300px;
            top: 79px;
            margin-left: -30px;
            margin-top: -30px;
            z-index: 999999;
        }
        
        
        
        
        #simple-menu {
            width: 60px;
            height: 60px;
            cursor: move;
        }
        .wave-mask {
                position: absolute;
                width: 200px;
                height: 200px;
                top: 10px;
                left: 55%;
                border-radius: 40%;
                background-color: rgba(212, 24, 24, 0.9);
                transform: translate(-50%, -70%) rotate(0);
                animation: toRotate 10s linear -5s infinite;
                z-index: 20;
            }

            @keyframes toRotate {
                50% {
                    transform: translate(-50%, -70%) rotate(180deg);
                }

                100% {
                    transform: translate(-50%, -70%) rotate(360deg);
                }
            }

            .container {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 3px solid #17caff;
                background: #ffffff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                padding: 5px;
            }

            .wave {
                position: relative;
                width: 100px;
                height: 100px;
                background-image: linear-gradient(-180deg, #41d4ff 13%, #17caff 91%);
                border-radius: 50%;
            }

            .container {
                overflow: hidden;
            }

            .wave-mask {
                background-color: rgba(255, 255, 255, 0.9);
            }
                  @-webkit-keyframes fade-in {
            0%, 50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes fade-in {
            0%, 50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes fade-bg {
            0%, 50% {
                background: transparent;
            }
            100% {
                background: rgba(30, 197, 215, 0.5);
            }
        }

        @keyframes fade-bg {
            0%, 50% {
                background: transparent;
            }
            100% {
                background: rgba(30, 197, 215, 0.5);
            }
        }

        *, *::before, *::after {
            margin: 0;
            border: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body li.C {
            height: calc(calc(var(--s) * 1vmin) * 1.75);
            width: calc(calc(var(--s) * 1vmin) * 1.75);
            background: #2ef3ff;
        }

        body li.C::after {
            content: '';
        }

        ul {
            z-index: 0;
            height: 100vh;
            width: 100vw;
            list-style: none;
            background: #000000;
            overflow: hidden;
            position: relative;
            -webkit-animation: fade-in 1s ease-in-out;
            animation: fade-in 1s ease-in-out;
        }

        li {
            position: absolute;
            left: calc(-1 * calc(calc(var(--s) * 1vmin) / 2) + var(--X) * 1%);
            top: calc(-1 * calc(calc(var(--s) * 1vmin) / 2) + var(--Y) * 1%);
            transition: left calc(var(--t) * 1ms), top calc(var(--t) * 1ms), width 0.1s, height 0.1s, background 0.1s;
            transition-timing-function: ease-in-out;
            border-radius: 50%;
            height: calc(var(--s) * 1vmin);
            width: calc(var(--s) * 1vmin);
            background: rgba(117, 184, 215, 0.8);
        }

        li:first-child {
            z-index: 1;
            height: calc(calc(var(--s) * 1vmin) * 2.5);
            width: calc(calc(var(--s) * 1vmin) * 2.5);
            background: #1ea3f2;
        }

        li::after {
            z-index: -1;
            display: block;
            height: calc(calc(var(--s) * 1vmin) * .25);
            width: calc(var(--L) * 1px);
            position: absolute;
            border-radius: calc(calc(var(--s) * 1vmin) * .25);
            right: 50%;
            top: calc(50% - calc(calc(var(--s) * 1vmin) * .25) / 2);
            -webkit-transform-origin: right;
            transform-origin: right;
            -webkit-animation: fade-bg .1s ease-in-out forwards;
            animation: fade-bg .1s ease-in-out forwards;
            -webkit-transform: rotate3d(0, 0, 1, calc(var(--T) * 1rad));
            transform: rotate3d(0, 0, 1, calc(var(--T) * 1rad));
        }
        </style>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
    
</head>
<body>

        <ul style="--t: 8000; --s: 1; --d: 200;">



        <h1>物联网实训室</h1>
        <iframe width="60%" src="http://192.168.31.14/index" align="right" marginheight="35px" height="250" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>
        <span>当前屋内人数：</span>
        <span id="dqrs"></span>
        
        <p></p>
        
        <span>今日人流量：</span>
        <span id="dtrs"></span>
        <p></p>
        <span>当月人流量：</span>
        <span id="dyrs"></span>
        
        <p></p>
        
        <span>总流量：</span> 
        <span id="xtrs"></span>
        
        <p></p>
        <span id="cs"></span>
        
        
        
        
        
        
        
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:400px;"></div>
            <br /><br />
    <div id="main2" style="width: 800px;height:400px;"></div>

    <li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/>
    <li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/>
    <li/><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/>
    <li/><li/><li/>
    <script type="text/javascript">



function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}





            var int=self.setInterval("clock()",10000);
            function clock()
            {
       
                var option = {
            
                 



            title: {
                text: '月份人数统计'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
            },
            yAxis: {},
            series: [{
                name: '',
                type: 'bar',
                data: [a, b, c, d, e, f,g,h,i,j,k,l]
            }]
        };

        var option2 = {
            title: {
                text: '历年人数统计'
            },
            tooltip: {},
            legend: {
                data:['']
            },
            xAxis: {
                data: ["去年","今年"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [qns,jns]
            }]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
        var myChart = echarts.init(document.getElementById('main2'));
        myChart.setOption(option2);
        
            
               ss();
               sss();
               ssss();
               sssss();
            
                function ss(){
                var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dqrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                
                    xmlhttp.open("GET", "/people?people=" +"dqrs");
                    xmlhttp.send();
                }
            
            
                function sss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dtrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"dtrs");
                    xmlhttp.send();
            
            
                }
                function ssss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("dyrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"dyrs");
                    xmlhttp.send();
            
            
                }
                function sssss(){
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){
                            document.getElementById("xtrs").innerHTML = xmlhttp.responseText;
                          
            
                        }
            
                    }
                   
                    xmlhttp.open("GET", "/people?people=" +"xtrs");
                    xmlhttp.send();
            
            
                }
            
            
            
            }
            
            
            var a,b,c,d,e,f,g,h,i,j,k,l;
        var qns,jns;

        as();bs();cs();ds();es();fs();gs();hs();is();gs();ks();ls();qnrss();jnrss();
      
//a
       function as(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            ha(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"1");
                    xmlhttp.send(); 
                }              
                function ha(html){
                        a=parseInt(html);
                    }
//b
                    function bs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hb(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"2");
                    xmlhttp.send(); 
                }              
                function hb(html){
                        b=parseInt(html);
                    }
//c
                    function cs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hc(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"3");
                    xmlhttp.send(); 
                }              
                function hc(html){
                        c=parseInt(html);
                    }
  //d         
                    function ds(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hd(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"4");
                    xmlhttp.send(); 
                }              
                function hd(html){
                        d=parseInt(html);
                    }
//e
                    function es(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            he(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"5");
                    xmlhttp.send(); 
                }              
                function he(html){
                        e=parseInt(html);
                    }
 //f           
                    function fs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hf(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"6");
                    xmlhttp.send(); 
                }              
                function hf(html){
                        f=parseInt(html);
                    }
 //g           
                    function gs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hg(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"7");
                    xmlhttp.send(); 
                }              
                function hg(html){
                        g=parseInt(html);
                    }
 //h           
                    function hs(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hh(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"8");
                    xmlhttp.send(); 
                }              
                function hh(html){
                        h=parseInt(html);
                    }
//i
                    function is(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hi(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"9");
                    xmlhttp.send(); 
                }              
                function hi(html){
                        i=parseInt(html);
                    }
  //j          
                    function js(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hj(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"10");
                    xmlhttp.send(); 
                }              
                function hj(html){
                        j=parseInt(html);
                    }
     //k
     function ks(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hk(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"11");
                    xmlhttp.send(); 
                }              
                function hk(html){
                        k=parseInt(html);
                    }
        //l
        function ls(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            hl(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"12");
                    xmlhttp.send(); 
                }              
                function hl(html){
                        l=parseInt(html);
                    }
                       
            //qn
            function qnrss(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            r1(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"qnrs");
                    xmlhttp.send(); 
                }              
                function r1(html){
                    qns=parseInt(html);
                    }
            //jn
            function jnrss(){
        var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    }
                    xmlhttp.onreadystatechange = function () {
                        if ( xmlhttp.status == 200){ 
                            r2(xmlhttp.responseText);  
                        }      
                    }
                    xmlhttp.open("GET", "/people?people=" +"jnrs");
                    xmlhttp.send(); 
                }              
                function r2(html){
                    jns=parseInt(html);
                    }
            
const {body} = document, list = body.querySelector('ul'), items = Array.from(list.querySelectorAll('li')),
            ref = items[0], {length} = items, t = +list.style.getPropertyValue('--t'),
            dl = +list.style.getPropertyValue('--d');

        let cX, cY, pts = items.map(pt => ({pt}));
        const {B, O, C, L, P, R, S, T, V} = {
            B: t => t.getBoundingClientRect(),
            O: t => {
                const {x, y, height: h, width: w} = B(t);
                return {x: x + w * .5, y: y + h * .5}
            },
            R: n => Math.random() * n,
            S: (t, s) => t.style.cssText = s,
            P: _ => ({X: R(100), Y: R(100)}),
            L: (x, y) => Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)),
            T: (x, y) => Math.atan2(y, x),
            V: (d, dX, dY) => Math.abs(dX) < d && Math.abs(dY) < d,
            C: (pt, d, cX, cY) => {
                const {x, y} = O(pt), dX = x - cX, dY = y - cY;
                return {dX, dY, dV: V(d, dX, dY)};
            }
        }
        const {animate, connect, init, move, track} = {
            move: _ => pts = pts.map(({pt}) => {
                return {pt, ...P()}
            }), track: _ => {
                const {x, y} = O(ref);
                return {cX: x, cY: y}
            }, connect: _ => pts.forEach(({pt, X, Y}, index) => {
                const {dV, dX, dY} = C(pt, dl, cX, cY);
                S(pt, `--X: ${X}; --Y: ${Y}; ${dV && index > 0 ? `--L: ${L(dX, dY)}; --T: ${T(dX, dY)}` : ''}`);
                pt.className = dV && index > 0 ? 'C' : '';
            }), animate: () => {
                ({cX, cY} = track());
                S(body, `--cX: ${cX}; --cY: ${cY}`);
                connect();
                requestAnimationFrame(animate);
            }, init: () => {
                move();
                setTimeout(move, 250);
                setInterval(move, t);
                requestAnimationFrame(animate);
            }
        }
        init();













            
            </script>
    
   
    
</body>
</html>